陳述式 與 表達式

在介紹箭頭函式之前，我們先簡單了解一下甚麼是 函式陳述式 跟 函式表達式

函式陳述式 ( Function Statement )

函式陳述式是在宣告函式時會給定一個名字，在宣告時 JS 引擎會保留一個記憶體空間，並把這個函式名稱跟記憶體空間做連結，所以此種函式宣告屬於函式陳述式。

function numA (x){
    return x + x;
}

// 在呼叫時是呼叫函式名稱

函式表達式 ( Function Expression )

函式表達式是另一種宣告函式的方式，做法是把一個匿名的函式指派給一個變數。這種方式只有在執行的階段才會把函式內容指派給變數，而變數的指派屬於表達式，因此這種函式宣告方式也被稱為函式表達式。

const numA = function(x){
    return x + x;
}

// 在呼叫時是呼叫變數名稱

這邊只簡單介紹了兩個方式的區別，詳細內容可參考：

卡斯伯 - JavaScript 表達式觀念及運用 - JS Expression
JS 原力覺醒 Day07 - 陳述式 表達式

箭頭函式

箭頭函式 的作用是可以讓程式碼變得更簡明易讀，而為什麼會先介紹 函式陳述式 跟 函式表達式 呢？因為 箭頭函式 是從 函式表達式 變化而來，以同樣的程式碼為例：

// 函式表達式
const numA = function(x){
    return x + x;
}

console.log(numA(3)) // 6


// 箭頭函式
const numA = (x) => {
    return x + x;
}

console.log(numA(3)) // 6

可以看到 箭頭函式 會把 function 省略，把參數 (x) 往前移，並在後面加上了箭頭 => 符號，此種寫法跟上面的表達式是一樣的作用。

如果有兩個參數

const numA = (x,y) => {
    return x + y;
}

console.log(numA(3,2)) // 5

如果函式有搭配到 return 且程式碼只有一行，可再更縮寫，直接省略大括號 {} 跟 return

const numA = (x,y) => x + y;

console.log(numA(3,2)) // 5

如果參數只有一個，可以省略小括號 ()

const numA = x => x + x;

console.log(numA(5)) // 10

如果沒有參數，還是要加空的小括號

const numA = () => 5;

console.log(numA()) // 5

陣列操作 map() 也可以使用箭頭函式

原函式

const arr = [1,3,5,7,9];

const newArr = arr.map(function(item){
    return item * item;
})

console.log(newArr); //(5)[1, 9, 25, 49, 81]

箭頭函式

const arr = [1,3,5,7,9];

const newArr = arr.map((item) => {
    return item * item;
})

console.log(newArr); //(5)[1, 9, 25, 49, 81]

因為有 return 且函式內只有一行程式碼，參數也只有一個，所以可再更省略

const arr = [1,3,5,7,9];

const newArr = arr.map(item => item * item)

console.log(newArr); //(5)[1, 9, 25, 49, 81]

以上例子可以看到箭頭函式可以幫助我們把程式碼寫得快速又簡潔，讓可閱讀性提高。

這邊主要是先簡單介紹箭頭函式怎麼寫，箭頭函式還有許多可以了解的例如與 this 之間的關係，何時不可用箭頭函式等詳細內容，可以參考下面的參考資料。

參考資料

線上課程
MDN
[ES6-重點紀錄] 箭頭函數 Arrow Function
從 ES6 開始的 JavaScript 學習生活